<!-- 左侧拖拽控件区域 -->
<template>
  <div class="dragger-left">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="组件仓库" name="first">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="容器" name="1">
            <SourceContainer />
          </el-collapse-item>
          <el-collapse-item title="基础组件" name="2">
          </el-collapse-item> </el-collapse
      ></el-tab-pane>
      <el-tab-pane label="布局模板" name="second"> 布局模板</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import draggable from "vuedraggable";
import { containerComList } from "../baseScript";
import { ref } from "vue";

const activeName = ref("first");
const activeNames = ref(["1"]);
</script>

<style lang="scss" scoped>
.dragger-left {
  height: 100%;
  width: 20%;
  padding: 16px 6px;
  ::v-deep {
    .el-tabs__nav {
      padding: 0 6px;
    }
  }
}
</style>
